<template>
  <view class="contentbox">
    <view class="box" v-if="isEdit">
      <block v-if="isEditTeach">
        <p class="box_teach">带队导师信息</p>
        <view class="input_box">
          <input placeholder="输入带队导师姓名" v-model="bindingInfo[0].name" />
        </view>
        <view class="input_box">
          <input placeholder="输入带队导师身份证号码" v-model="bindingInfo[0].cardNumber" />
        </view>
        <view class="input_box">
          <input placeholder="输入带队导师联系方式" v-model="bindingInfo[0].mobile" />
        </view>
        <view class="big_box">
          <view class="input_box" style="margin-right: 20rpx">
            <input placeholder="选择带队导师年龄" type="number" v-model="bindingInfo[0].age" />
          </view>
          <view class="input_box">
            <input
              placeholder="选择带队导师性别"
              @click="showActionSheet('sex', 0, 'bindingInfo')"
              v-model="bindingInfo[0].sex"
            />
          </view>
        </view>
        <view class="big_box">
          <view class="input_box" style="margin-right: 20rpx">
            <input
              placeholder="选择带队导师衣服尺码"
              @click="showActionSheet('clothingSize', 0, 'bindingInfo')"
              v-model="bindingInfo[0].clothingSize"
            />
          </view>
          <view class="input_box">
            <input placeholder="选择带队导师职务" v-model="bindingInfo[0].grade" />
          </view>
        </view>
      </block>
      <block v-if="isEditstudent">
        <block v-for="(t, idx) in bindingInfoList" :key="idx">
          <view style="display: flex; justify-content: space-between; align-items: center">
            <p class="box_teach" v-if="!isHaveInfo">请输入学员{{ idx + 1 }}信息</p>
            <image
              style="width: 30rpx; height: 30rpx"
              src="https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/icon_decreace.png"
              mode="scaleToFill"
              @click="addbdInfo(idx)"
            />
          </view>
          <view class="input_box">
            <input placeholder="输入学员姓名" v-model="t.name" />
          </view>
          <view class="input_box">
            <input placeholder="输入学员身份证号码" v-model="t.cardNumber" />
          </view>
          <view class="input_box">
            <input placeholder="输入学员联系方式" v-model="t.mobile" />
          </view>
          <view class="big_box">
            <view class="input_box" style="margin-right: 20rpx">
              <input placeholder="选择学员年龄" v-model="t.age" />
            </view>
            <view class="input_box">
              <input
                placeholder="选择学员性别"
                v-model="t.sex"
                @click="showActionSheet('sex', idx, 'bindingInfoList')"
              />
            </view>
          </view>
          <view class="big_box">
            <view class="input_box" style="margin-right: 20rpx">
              <input
                placeholder="选择学员衣服尺码"
                v-model="t.clothingSize"
                @click="showActionSheet('clothingSize', idx, 'bindingInfoList')"
              />
            </view>
            <view class="input_box">
              <input placeholder="选择学员年级" v-model="t.grade" />
            </view>
          </view>
        </block>
      </block>
      <view class="btn_box">
        <view class="btn_box_btn" v-if="!isHaveInfo" @click="addbdInfo(-1)">添加学员</view>
        <view class="btn_box_btn2" @click="toSubmit">提交信息</view>
      </view>
    </view>
    <view class="team-info" v-if="!isEdit">
      <view class="teacher-box">
        <view class="teacher-label">已绑定带队导师信息（{{ bindingInfoY.length }}人）</view>
        <view class="team-info-item" v-for="(teacher, tIdx) in bindingInfoY" :key="tIdx">
          <view class="team-info-item-top">
            <image
              :src="teacher.avator || 'https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/teacher.png'"
              mode="scaleToFill"
            />

            <view class="team-info-item-right-top">
              <text class="team-teacher-name">{{ teacher.name }}</text>
              <text class="team-teacher-id">身份证：{{ teacher.cardNumber }}</text>
            </view>
          </view>
          <view class="team-info-item-midd">
            <view class="midd-item">
              <view class="midd-label">性别</view>
              <view class="midd-text">{{ teacher.sex == 1 ? "男" : "女" }} </view>
            </view>
            <view class="midd-item">
              <view class="midd-label">服装尺码</view>
              <view class="midd-text">{{ teacher.clothingSize }}</view>
            </view>
            <view class="midd-item">
              <view class="midd-label">年龄</view>
              <view class="midd-text">{{ teacher.age }}</view>
            </view>
          </view>
          <view class="team-info-item-bottom">
            <view>
              <view class="label">职务</view>
              <view class="text">
                <!-- <text>{{ proxy.name }}</text> -->
                <view class="tag">{{ teacher.grade }}</view>
              </view>
            </view>
            <view class="btn" style="color: #fff; background: #f95717" @click="toUpdateinfo(teacher)">
              <text>点击修改</text>
              <view class="trangle" style="border-bottom: 14.248rpx solid #fff"></view>
            </view>
          </view>
        </view>
      </view>
      <!-- students -->
      <view class="student-box">
        <view class="student-label">已绑定学员信息（{{ bindingInfoListY.length }}人）</view>
        <view class="team-info-item" v-for="(student, sIdx) in bindingInfoListY" :key="sIdx">
          <view class="team-info-item-top">
            <image
              :src="student.avator || 'https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/student1.png'"
              mode="scaleToFill"
            />
            <view class="team-info-item-right-top">
              <text class="team-teacher-name">{{ student.name }}</text>
              <text class="team-teacher-id">身份证：{{ student.cardNumber }}</text>
            </view>
          </view>
          <view class="team-info-item-midd">
            <view class="midd-item">
              <view class="midd-label">性别</view>
              <view class="midd-text">{{ student.sex == 0 ? "男" : "女" }}</view>
            </view>
            <view class="midd-item">
              <view class="midd-label">服装尺码</view>
              <view class="midd-text">{{ student.clothingSize }}</view>
            </view>
            <view class="midd-item">
              <view class="midd-label">年龄</view>
              <view class="midd-text">{{ student.age }}</view>
            </view>
          </view>
          <view class="team-info-item-bottom">
            <view>
              <view class="label">年级</view>
              <view class="text">
                <!-- <text>{{ proxy.name }}</text> -->
                <view class="tag">{{ student.grade }}</view>
              </view>
            </view>
            <view class="btn" @click="toUpdateinfo(student)">
              <text>点击修改</text>
              <view class="trangle"></view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import indexApi from "@/api/yanxue/yanxue";
export default {
  data() {
    return {
      isEdit: true,
      dataList: [],
      bindingInfoList: [{}, {}],
      bindingInfo: [{ age: "", cardNumber: "", clothingSize: "", grade: "", mobile: "", name: "", sex: "" }],
      bindingInfoY: [],
      bindingInfoListY: [],
      id: "",
      isHaveInfo: false,
      isEditTeach: false,
      isEditstudent: false,
    };
  },
  onLoad(options) {
    this.id = options.id;
    this.getBdInfo();
  },
  onShow() {},
  methods: {
    toUpdateinfo(item) {
      let d = JSON.parse(JSON.stringify(item));
      d.sex = d.sex == 1 ? "男" : "女";
      if (item.userType == 1) {
        // 老师
        this.isEditTeach = true;
        this.isEditstudent = false;
        this.bindingInfo = [d];
        this.isEdit = true;
      }
      if (item.userType == 0) {
        // 学生
        this.isEditTeach = false;
        this.isEditstudent = true;
        this.bindingInfoList = [d];
        this.isEdit = true;
      }
    },
    toSubmit() {
      let bindingInfo = JSON.parse(JSON.stringify(this.bindingInfo));
      let bindingInfoList = JSON.parse(JSON.stringify(this.bindingInfoList));
      bindingInfo.forEach((x) => (x.sex = x.sex == "男" ? 1 : 2));
      bindingInfoList.forEach((x) => (x.sex = x.sex == "男" ? 1 : 2));
      if (this.getRules("bindingInfo", "导师") && this.isEditTeach) {
        return;
      }
      if (this.getRules("bindingInfoList", "学生") && this.isEditstudent) {
        return;
      }
      if ((this.isEditTeach || this.isEditstudent) && this.isHaveInfo) {
        let dataL = this.isEditTeach ? bindingInfo[0] : bindingInfoList[0];
        let obj = {
          age: dataL.age,
          cardNumber: dataL.cardNumber,
          clothingSize: dataL.clothingSize,
          grade: dataL.grade,
          id: dataL.id,
          mobile: dataL.mobile,
          name: dataL.name,
          sex: dataL.sex,
        };
        indexApi.bindingInfoEdit(obj).then((res) => {
          uni.showToast({ title: "修改成功", icon: "none" });
          this.getBdInfo();
        });
        return;
      }
      let obj = {
        bindingInfo: bindingInfo,
        bindingInfoList: bindingInfoList,
        projectId: this.id,
      };
      indexApi.projectBinding(obj).then((res) => {
        uni.showToast({ title: "绑定成功", icon: "none" });
        setTimeout(() => {
          this.getBdInfo();
        }, 800);
      });
    },
    getBdInfo() {
      indexApi.getBindingInfoList({ id: this.id }).then((res) => {
        //   this.bindingInfo = res.result;
        res.result.forEach((x) => {
          x.sex = x.sex == 1 ? "男" : x.sex == 1 ? "女" : "";
        });
        if (res.result && res.result.length > 0) {
          this.isHaveInfo = true;
          this.isEdit = false;
          this.bindingInfoY = res.result.filter((item) => item.userType == 1);
          this.bindingInfoListY = res.result.filter((item) => item.userType == 0);
        } else {
          this.isHaveInfo = false;
          this.isEdit = true;
          this.isEditTeach = true;
          this.isEditstudent = true;
        }
      });
    },
    getRules(dType, tips) {
      let dAs = this[dType];
      if (dAs.some((x) => !x.name)) {
        uni.showToast({ title: `请输入${tips}姓名`, icon: "none" });
        return true;
      }
      if (dAs.some((x) => !x.mobile)) {
        uni.showToast({ title: `请填写${tips}联系方式`, icon: "none" });
        return true;
      }
      if (dAs.some((x) => !x.age)) {
        uni.showToast({ title: `请输入${tips}年龄`, icon: "none" });
        return true;
      }
      if (dAs.some((x) => !x.cardNumber)) {
        uni.showToast({ title: `请输入${tips}身份证号`, icon: "none" });
        return true;
      }
      if (dAs.some((x) => !x.clothingSize)) {
        uni.showToast({ title: `请选择${tips}衣服尺码`, icon: "none" });
        return true;
      }
      if (dAs.some((x) => !x.grade)) {
        uni.showToast({ title: `请选择${tips}${tips == "学生" ? "年级" : "职务"}`, icon: "none" });
        return true;
      }
      if (dAs.some((x) => !x.sex)) {
        uni.showToast({ title: `请选择${tips}衣服尺码`, icon: "none" });
        return true;
      }
      return false;
    },
    showActionSheet(sType, idx, dType) {
      const app = this;
      let sheetList = sType == "sex" ? ["男", "女"] : ["S", "M", "L", "XL", "XXL", "XXXL"];
      uni.showActionSheet({
        itemList: sheetList,
        success: (res) => {
          app[dType][idx][sType] = sheetList[res.tapIndex];
          if (dType == "bindingInfoList") {
            app[dType].push({});
            app[dType].pop();
          }
        },
        fail: function (res) {},
      });
    },
    addbdInfo(type) {
      if (type > -1) {
        this.bindingInfoList.splice(type, 1);
      } else {
        this.bindingInfoList.push({});
      }
    },
  },
};
</script>
<style scoped lang="scss">
.contentbox {
  width: 750rpx;
  height: 100%;
  background: linear-gradient(0deg, #c1f26c 0%, #ffffff 100%);
  .box {
    width: 702rpx;
    min-height: 100vh;
    background: #ffffff;
    box-shadow: -4rpx 0rpx 19rpx 1rpx rgba(52, 52, 52, 0.15);
    border-radius: 48rpx;
    padding: 32rpx;
    margin: 42rpx auto;
    padding-bottom: 200rpx;
    .box_teach {
      height: 32rpx;
      font-family: HarmonyOS Sans SC;
      font-weight: 500;
      font-size: 32rpx;
      color: #111827;
      line-height: 52rpx;
      margin-bottom: 30rpx;
      font-weight: bold;
    }
    .big_box {
      display: flex;
    }
    .input_box {
      width: 644rpx;
      height: 84rpx;
      background: #e8e8e8;
      border-radius: 42rpx;
      padding-left: 26rpx;
      display: flex;
      align-items: center;
      margin-bottom: 16rpx;
      flex: 1;
      input {
        flex: 1;
        // padding-left: 26rpx;
        border-left: 2rpx solid #9e9e9e;
      }
    }
  }
  .btn_box {
    width: 750rpx;
    height: 189rpx;
    position: fixed;
    bottom: 8rpx;
    left: 0;
    display: flex;
    justify-content: space-between;
    background: #fff;
    z-index: 9;
    padding-top: 30rpx;
    padding: 30rpx;
    .btn_box_btn {
      width: 308rpx;
      height: 107rpx;
      line-height: 101rpx;
      border-radius: 46rpx;
      border: 4rpx solid #f95513;
      text-align: center;
      margin-left: 40rpx;
      font-family: HarmonyOS Sans SC;
      font-weight: 400;
      font-size: 30rpx;
      color: #f95513;
    }
    .btn_box_btn2 {
      width: 308rpx;
      height: 107rpx;
      line-height: 101rpx;
      background: #f95513;
      border-radius: 46rpx;
      border: 4rpx solid #f95513;
      text-align: center;
      margin-right: 40rpx;
      font-family: HarmonyOS Sans SC;
      font-weight: 400;
      font-size: 30rpx;
      color: #ffffff;
    }
  }
  .team-info {
    background: #f6f6f6;
    width: 648rpx;
    height: 100%;
    background: #ffffff;
    box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(52, 52, 52, 0.2);
    border-radius: 20rpx;
    padding: 24rpx;
    margin-bottom: 36rpx;
    margin: 0 auto 36rpx auto;
    .teacher-box {
      margin-bottom: 36rpx;

      .team-info-item {
        border: 4rpx solid #f95513;
      }

      .teacher-label {
        font-family: HarmonyOS Sans SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #111827;
        line-height: 28rpx;
      }
    }

    .student-box {
      .team-info-item {
        border: 4rpx solid #a2ff00;
      }

      .student-label {
        font-family: HarmonyOS Sans SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #111827;
        line-height: 28rpx;
      }
    }

    .team-info-item {
      background: #fff;
      border-radius: 20rpx;
      margin-bottom: 20rpx;
      padding: 0 28rpx;
      width: 599rpx;
      height: 436rpx;
      background: #ffffff;
      box-shadow: 0rpx 6rpx 14rpx 0rpx rgba(0, 0, 0, 0.2);
      border-radius: 20rpx;
      margin-top: 20rpx;

      .team-info-item-top {
        display: flex;
        align-items: center;
        padding-top: 36rpx;
        padding-bottom: 26rpx;

        image {
          width: 100rpx;
          height: 100rpx;
          border-radius: 50%;
          margin-right: 20rpx;
        }
      }

      .team-info-item-right-top {
        text {
          display: block;
        }

        .team-teacher-name {
          font-family: HarmonyOS Sans SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #0a1629;
          line-height: 28rpx;
        }

        .team-teacher-id {
          font-family: HarmonyOS Sans SC;
          font-weight: 400;
          font-size: 25rpx;
          color: #91929e;
          line-height: 25rpx;
          margin-top: 18rpx;
        }
      }

      .team-info-item-midd {
        display: flex;
        justify-content: space-between;
        padding: 38rpx 30rpx 0 36rpx;
        width: 524rpx;
        margin: 0 auto;
        border-top: 2rpx solid #e4e6e8;

        .midd-item {
          .midd-label {
            font-family: HarmonyOS Sans SC;
            font-weight: 400;
            font-size: 25rpx;
            color: #91929e;
            line-height: 25rpx;
            text-align: center;
          }

          .midd-text {
            font-family: HarmonyOS Sans SC;
            font-weight: 400;
            font-size: 26rpx;
            color: #0a1629;
            line-height: 26rpx;
            margin-top: 20rpx;
            text-align: center;
          }
        }
      }

      .team-info-item-bottom {
        padding-left: 36rpx;
        margin-top: 40rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .label {
          font-size: 28rpx;
          color: #666666;
          margin-right: 20rpx;
        }
        .btn {
          width: 166rpx;
          height: 72rpx;
          background: #a2ff00;
          border-radius: 36rpx;
          font-family: HarmonyOS Sans SC;
          font-weight: bold;
          font-size: 26rpx;
          color: #030400;
          line-height: 72rpx;
          text-align: center;
          display: flex;
          align-items: center;
          justify-content: center;

          .trangle {
            // left: 1rpx;
            // transform: translate(-50%, -50%);
            width: 0;
            height: 0;
            border-left: 8rpx solid transparent;
            border-right: 8rpx solid transparent;
            border-bottom: 14.248rpx solid #000;
            transform: rotate(90deg);
            margin-left: 8rpx;
          }
        }

        .text {
          font-family: HarmonyOS Sans SC;
          font-weight: 400;
          font-size: 26rpx;
          color: #0a1629;
          line-height: 26rpx;
          margin-top: 14rpx;
          display: flex;
          align-items: center;

          text {
            font-size: 28rpx;
            color: #666666;
          }

          .tag {
            font-family: HarmonyOS Sans SC;
            font-weight: 400;
            font-size: 19rpx;
            color: #7d8592;
            line-height: 19rpx;
            // margin-left: 20rpx;
            border-radius: 16rpx;
            border: 4rpx solid #7d8592;
            padding: 8rpx 16rpx;
          }
        }
      }
    }
  }
}
</style>
